<template>
  <div class="pageWrapper">
    <!-- <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="支付方式名称:" :labelLg="8">
        <Input type="text" v-model="searchData.name" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="支付类型:" :labelLg="8">
        <Select v-model="searchData.city" placeholder="请选择" :clearable="isClear">
          <Option :value="item.value" v-for="(item, key) in []" :key="key">{{item.label}}</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="是否启用:" :labelLg="8">
        <Select v-model="searchData.city" placeholder="请选择" :clearable="isClear">
          <Option :value="item.value" v-for="(item, key) in []" :key="key">{{item.label}}</Option>
        </Select>
      </SearchBarItem>
    </SearchBar> -->
    <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
      <template #extra>
        <Authc permissions="trade:payment:payChannel:edit">
          <Button type="primary" @click="handleClick('add')">新增</Button>
        </Authc>
      </template>
    </RemoteTable>

    <Modal v-model="isShow" :visible.sync="isShow" :title="title">
      <Loading :loading=false>
        <Form ref="dataModule" :label-width="130" :model="dataModule" :rules="ruleValidate">
          <FormItem prop="paymentChannelCode" label="支付渠道编码" >
            <Input type="text" v-model.trim="dataModule.paymentChannelCode" maxlength="10" placeholder="请填写,字数不超过10"/>
          </FormItem>
          <FormItem prop="paymentChannelName" label="支付渠道名称">
            <Input type="text" v-model.trim="dataModule.paymentChannelName" maxlength="20" placeholder="请填写,字数不超过20"/>
          </FormItem>
          <FormItem prop="slottingRate" label="通道费率">
            <Input type="text" v-model="dataModule.slottingRate" number placeholder="请填写数字">
              <span slot="append">%</span>
            </Input>
          </FormItem>
          <FormItem prop="appid" label="支付渠道应用ID">
            <Input type="text" v-model.trim="dataModule.appid" :maxlength="maxlength" placeholder="请填写,字数不超过32"/>
          </FormItem>
          <FormItem prop="mchId" label="支付渠道商户号">
            <Input type="text" v-model.trim="dataModule.mchId" :maxlength="maxlength" placeholder="请填写,字数不超过32"/>
          </FormItem>
        </Form>
      </Loading>
      <div slot="footer">
        <Button style="margin-left: 8px" @click="isShow = false">取消</Button>
        <Button type="primary" @click="handleSubmit('dataModule')">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
  } from "view-design";
  import Loading from "@/components/Loading";
  import RemoteTable from "@/components/RemoteTable";
  import SearchBar from "@/components/SearchBar";
  import RemoteSelect from "@/components/RemoteSelect";
  import {
    namespace
  } from "../Module/payChahel.js";
  import Authc from "@/components/Authc";
  import Action from "./Action";
  import config from "@/utils/config";
  import appService from "@/utils/appService";
  export default {
    name: 'tables_page',
    components: {
      RemoteTable,
      SearchBar,
      SearchBarItem: SearchBar.SearchBarItem,
      RemoteSelect,
      Loading,
      Authc,
      Action,
      Button,
      Input,
      Modal,
      Message,
      Col,
      Row,
      Form,
      FormItem,
      DatePicker,
      Select,
      Option,
      Card
    },
    data() {
      return {
        title: '添加支付渠道',
        maxlength: 32,
        isShow: false,
        requireUrl: '',
        namespace: namespace,
        isClear: true,
        loading: true,
        modal1: false,
        dataModule: {},
        searchData: {},
        tableData: [],
        ruleValidate: {
          paymentChannelCode: [{ required: true, message: '请填写', trigger: 'blur' }],
          paymentChannelName: [{ required: true, message: '请填写', trigger: 'blur' }],
          slottingRate: [{ required: true, type: 'number', message: '请填写', trigger: 'blur' }],
          appid: [{ required: true, message: '请填写', trigger: 'blur' }],
          mchId: [{ required: true, message: '请填写', trigger: 'blur' }]
        },
        columns: [
          {
            title: '序号',
            type: 'index',
            width: 80,
            align: 'center'
          },
          {
            title: '支付渠道编码',
            key: 'paymentChannelCode',
            align: 'center',
            minWidth: 120
          },
          {
            title: '支付渠道名称',
            key: 'paymentChannelName',
            align: 'center',
            minWidth: 120
          },
          {
            title: '通道费率',
            key: 'slottingRate',
            align: 'center',
            minWidth: 100
          },
          {
            title: '支付渠道应用ID',
            align: 'center',
            key: 'appid',
            minWidth: 100
          },
          {
            title: '支付渠道商户号',
            key: 'mchId',
            align: 'center',
            minWidth: 100
          }
          // {
          //   title: "操作",
          //   key: "action",
          //   align: "center",
          //   permissions: ["trade:payment:manager"],
          //   width: 120,
          //   render: function(h, data) {
          //     return h(Action, {
          //       props: {
          //         row: data.row
          //       }
          //     });
          //   }
          // }
          // {
          //   title: '操作',
          //   key: 'handle',
          //   width: 160,
          //   options: ['delete', 'check', 'edit'],
          //   buttons: [
          //     (h, params, vm) => {
          //       return this.dealBtnsOPeration(h, params, vm)
          //     }
          //   ]
          // }
        ]
      }
    },
    methods: {
      handleClick(type) {
        switch (type) {
          case 'add':
            this.isShow = true
            this.title = '新增支付渠道信息';
            this.dataModule = {};
            break
          case 'edit':

            break
          case 'delete':

            break
          case 'sure':
            this.isShow = false
            break
          default:
        }
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$store.dispatch(`${namespace}/save`, this.dataModule).then(res => {
              if (res.errorCode === 0) {
                this.$Message.success(res.msg);
                this.isShow = false
                this.$store.dispatch(`${namespace}/query`);
              } else {
                this.$Message.warning(res.msg)
              }
            })
          } else {
            console.log('error submit!!')
          }
        })
      },
      handleSearch() {
        let pageSize = {
          currentPage: 1,
          pageSize: 10
        }
        this.$store.dispatch(`${namespace}/query`, { ...this.searchData, ...pageSize });
      },
      onSortChange(sort) {
        if (sort.order === "normal") {
          this.queryParam.order = [];
        } else {
          this.queryParam.order = [sort.key + " " + sort.order];
        }
        this.handleSearch();
      },
      resetForm() {
        this.$refs['formArea'].resetFields()
      }
    },
    async mounted() {
      this.$bus.$on('actionType', (data) => {
        if (data.type === 'edit') {
          this.isShow = true
          this.title = '编辑支付渠道'
        } else if (data.type === 'delete') {
          Modal.confirm({
            render: (h, params) => {
              return h('div', [
                h('div', {
                  class: 'selfConfirm'
                }, '确定删除?')
              ]);
            },
            onOk: () => {
              return
            }
          })
        }
      });
    },
    beforeDestroy() {
      this.$bus.$off('actionType');
    }
  }
</script>

<style>

</style>
